<!DOCTYPE html>
<html>
	<head>
	  	<meta charset="UTF-8">
		<script src="../../public/js/tmpl.js"></script>
		<script>
			var content = template('Phead_resource', {
				title: '订单信息'
			});
			document.write(content);
		</script>
	</head>
	<body class="wrap_bg openCard">
		
		<!--<header>
			<div class="padding10 ">
				<h1 class="color-active am-text-center">当前等候人数：<span>3</span>人</h1>
			</div>
		</header>-->
		
		<section class="cont_info">
			<ul class="ul_box am-text-sm marginb10 bgs0">
				<li class="li_item padding-v10 am-g">
					<span class="am-u-sm-2 color-whites padding0">注意 :</span>
					<div class="am-u-sm-10 color-white padding0">
						<p class="">加入等候队列后，若有空位，将自动加入课程;</p>
						<p class="">若取消等候或未排上，预付金自动退回超猩卡；</p>
					</a>
				</li>
			</ul>
			
			<ul class="ul_box am-text-sm bgs0 marginb10">
				<li class="li_item border-bottom-grey padding-v10 am-cf">
					<span class="am-fl color-whites">课程 :</span>
					<span class="am-fr color-white">燃脂搏击</span>
				</li>
				<li class="li_item border-bottom-grey padding-v10 am-cf">
					<span class="am-fl color-whites">时间 :</span>
					<span class="am-fr color-white">9月18日 11:15-12:25</span>
				</li>
				<li class="li_item border-bottom-grey padding-v10 am-g">
					<span class="am-u-sm-2 color-whites padding0">地址 :</span>
					<span class="am-u-sm-10 color-white padding0">杭州市上城区建国路228号钱江时代大厦对面莲花超市旁杭州市第二人民医院</span>
				</li>
				<li class="li_item border-bottom-grey padding-v10 am-cf">
					<span class="am-fl color-whites">人数 :</span>
					<div class="am-fr color-white btnState_group">
						<button class="am-btn am-btn-xs on">1人</button>
					</div>
				</li>
				<li class="li_item  padding-v10 am-cf">
					<span class="am-fl color-whites">总价 :</span>
					<span class="am-fr color-white"><span class="total_price">69</span>元</span>
				</li>
			</ul>
			
			<ul class="ul_box am-text-sm margint10 bgs0">
				<li class="li_item border-bottom-grey padding-v10 am-cf">
					<span class="am-fl color-whites">超猩卡折后价 :</span>
					<a class="am-fr">
						<span class="color-active">尚未开通</span>
						<span class="am-icon-angle-right am-icon-fw"></span>
					</a>
				</li>
				<li class="li_item border-bottom-grey padding-v10 am-cf">
					<span class="am-fl color-whites">代金券 :</span>
					<a class="am-fr">
						<span class="color-white">0张可用</span>
						<span class="am-icon-angle-right am-icon-fw"></span>
					</a>
				</li>
				<li class="li_item padding-v10 am-cf">
					<span class="am-fl color-whites">还需支付 :</span>
					<span class="am-fr color-active "><span class="total_price">69</span>元</span>
				</li>
			</ul>
			<p class="am-text-center bottom_tip">
				注：排上后，课程开始前6小时后取消预约，不支持退款。
			</p>
		</section>
		
		<!--底部按钮-->
		<footer class="footer_nav">
			<a href="../personalCenter/open_card.html" class="am-text-center padding10 bgactive am-block">
				<span class="am-text-sm">仅支持超猩卡用户，点击充值</span>
			</a>
		</footer>
		
		<script>
			var content = template('progress_status', {});
			document.write(content);
		</script>
		
		<script id="data_info" type="text/html">
			<div class="padding10 ">
				<h1 class="color-active am-text-center">当前等候人数：<span>{{info.wait_personal}}</span>人</h1>
			</div>
			<ul class="ul_box am-text-sm marginb10 bgs0">
				<li class="li_item padding-v10 am-g">
					<span class="am-u-sm-2 color-whites padding0">注意 :</span>
					<div class="am-u-sm-10 color-white padding0">
						<p class="">{{info.notice}}</p>
					</a>
				</li>
			</ul>
			<ul class="ul_box am-text-sm bgs0 marginb10">
				<li class="li_item border-bottom-grey padding-v10 am-cf">
					<span class="am-fl color-whites">课程 :</span>
					<span class="am-fr color-white">{{info.name}}</span>
				</li>
				<li class="li_item border-bottom-grey padding-v10 am-cf">
					<span class="am-fl color-whites">时间 :</span>
					<span class="am-fr color-white">{{info.date_time}}</span>
				</li>
				<li class="li_item border-bottom-grey padding-v10 am-g">
					<span class="am-u-sm-2 color-whites padding0">地址 :</span>
					<span class="am-u-sm-10 color-white padding0">{{info.address}}</span>
				</li>
				<li class="li_item border-bottom-grey padding-v10 am-cf">
					<span class="am-fl color-whites">人数 :</span>
					<div class="am-fr color-white btnState_group">
						{{each info.numb_Of_personels}}
						{{if $index==0}}
						<button class="am-btn am-btn-xs on" data-price="{{$value.price}}">{{$value.num}}人</button>
						{{else}}
						<button class="am-btn am-btn-xs" data-price="{{$value.price}}">{{$value.num}}人</button>
						{{/if}}
						{{/each}}
					</div>
				</li>
				<li class="li_item  padding-v10 am-cf">
					<span class="am-fl color-whites">总价 :</span>
					<span class="am-fr color-white"><span class="total_price">{{info.total_price}}</span>元</span>
				</li>
			</ul>
			
			<ul class="ul_box am-text-sm margint10 bgs0">
				<li class="li_item border-bottom-grey padding-v10 am-cf">
					<span class="am-fl color-whites">超猩卡折后价 :</span>
					<a class="am-fr">
						{{if info.card_isOPen}}
						<span class="color-active">{{info.discount_price}}</span>
						{{else}}
						<span class="color-active">尚未开通</span>
						<span class="am-icon-angle-right am-icon-fw"></span>
						{{/if}}
					</a>
				</li>
				<li class="li_item border-bottom-grey padding-v10 am-cf">
					<span class="am-fl color-whites">代金券 :</span>
					<a class="am-fr">
						<span class="color-white">{{info.numOf_cashCoupon}}张可用</span>
						<span class="am-icon-angle-right am-icon-fw"></span>
					</a>
				</li>
				<li class="li_item padding-v10 am-cf">
					<span class="am-fl color-whites">还需支付 :</span>
					<span class="am-fr color-active "><span class="total_price">{{info.still_pay}}</span>元</span>
				</li>
			</ul>
			
			<p class="am-text-center bottom_tip">
				温馨提示: {{info.tip}}
			</p>
		</script>
		
		
		<script>
			var content = template('Pfoot_resource', {});
			document.write(content);
		</script>
		<script type="text/javascript">
		
		(function($, arttmpl){
			
			var info = {
				wait_personal:'4',
				notice:'加入等候队列后，若有空位，将自动加入课程;加入等候队列后，若有空位，将自动加入课程;',
				name:'燃脂搏击',
				date_time:'9月18日 11:15-12:25',
				address:'杭州市上城区建国路228号钱江时代大厦对面莲花超市旁杭州市第二人民医院',
				numb_Of_personels:[
					{num:'1',price:'69'},
					{num:'2',price:'138'},
					{num:'3',price:'207'}
				],
				total_price:'69',
				card_isOPen:false,
				discount_price:'69',
				numOf_cashCoupon:0,
				still_pay:'69',
				tip:'开始时间前6个小时前取消预约，住房金额退款；开始时间前6个小时后取消预约，不支持退款。'
			}
		
			var drawInfo = function(data){
				var d = {
					info:data
				};
				
				var content =arttmpl('data_info', d);
				$('.cont_info').html(content);
				
				
				/*绑定事件*/
				var btns = $('.cont_info').find('.btnState_group button');
				
				btns.click(function(){
					
					var i = btns.index($(this))+1;
					var price = $(this).attr('data-price');
					var $price = $('.cont_info').find('.total_price');
					
					$(this).addClass('on').siblings('button').removeClass('on');
					
					$price.html(price);
					
				});
			}
			
			/*成功回调*/
			var successcallback_Info = function(res){
				drawInfo(res)
			}
			
			/*失败回调*/
			var errorcallback = function(statuscode, statusmsg) {
				console.log(statuscode + "  " + statusmsg);
			};
			/*失败回调*/
			var faildcallback = function(xhr, errtype, errthow) {
				console.log(xhr.readyState + "  " + xhr.status + "  " + xhr.statusText);
			};
			
			/*请求数据*/
			var getInfo = function(op, sucessCallback, errorcallback, faildcallback){
				request('url', 't', 'd', info, sucessCallback, errorcallback, faildcallback);
			}
			
			var init = function(){
				getInfo('op', successcallback_Info, errorcallback, faildcallback)
				var $modal = $('#my-modal-loading');
				$modal.hide();
			}
			
			init();
		
		})(jQuery, template);
	
			
		</script>
	</body>
</html>
